<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url("image/bg.jpg");
        }

        div {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 30px auto;
            width: 900px;
            height: 900px;
        }

        .box > div {
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, .8);
            float: left;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
<script>
    window.onload = function () {
        let box = document.querySelector('.box');
        for (let i = 0; i < 900; i++)
            box.append(document.createElement('div'));
        let arr = document.querySelectorAll('.box>div');
        box.addEventListener('mousemove', function (e) {
            let left = Math.ceil((e.pageX - box.offsetLeft) / 30);
            let top = Math.ceil((e.pageY - box.offsetTop) / 30);
            for (let i = 0; i < 900; i++) {
                let x = Math.abs(left - i % 30 - 1);
                let y = Math.abs(top - Math.floor(i / 30 + 1));
                arr[i].style.opacity = x / 30 + y / 30;            }
        });
        box.addEventListener('mouseout', function (e) {
            let arr = document.querySelectorAll('.box>div');
            for (let i = 0; i < 900; i++) {
                arr[i].style.opacity = 1;
            }
        });
    }
</script>
</html>